<template>
  <div class="pdf-container">
    <div class="main-img">
      <img src="./image/01.png" alt="">
    </div>
    <div class="main-img">
      <img src="./image/02.png" alt="">
    </div>
    <div class="printBox" v-for="(item, index) in 10" :key="index">
      <!--第一页-->
      <div class="printBox-page">
        <p>标题xxxxx</p>
        <div class="imgWrap">
          <img src="./image/timg.png" style="display:inline-block;max-width: 300px;max-height:400px;">
          <img src="./image/timg.png" style="display:inline-block;max-width: 300px;max-height:400px;">
        </div>
        <p>
          <span>日期: 2018-07-11</span>
          <span>备注：xxxxx</span>
        </p>
      </div>
      <!--第2页-->
      <div class="printBox-page">
        <p>标题xxxxx</p>
        <div class="imgWrap">
          <img src="./image/timg.png" style="display:inline-block;max-width: 300px;max-height:400px;">
          <img src="./image/timg.png" style="display:inline-block;max-width: 300px;max-height:400px;">
        </div>
        <p>
          <span>日期: 2018-07-11</span>
          <span>备注：xxxxx</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {}
}
</script>

<style lang="scss">
.pdf-container {
  width: 100%;
  .main-img {
    width: 100%;
    display: flex;
    justify-content: center;
    img {
      width: 100%;
    }
  }
  .printBox {
    width: 100%;
    .printBox-page {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 0;
      img {
        margin: 0 5px;
      }
    }
  }
}
</style>